<!-- 搜索页 -->
<template>
    <div>
        <!-- 搜索框 -->
        <van-search v-model="keyword" show-action :placeholder="placeholderVal" @search="onSearch" @cancel="onCancel" @input="onInput" />
        <!-- 历史记录 -->
        <HistoryHot v-if="blockShow == 1" :searchHistoryData="searchHistoryData" :searchHotData="searchHotData" @goSearch="setValue"></HistoryHot>
        <!--  下拉菜单 全部-价格-分类 -->
        <DropDown v-else :goodList="goodList" :filterCategory="filterCategory" @changePrice="changePrice" @changeCategory="changeCategory"></DropDown>
    </div>
</template>

<script>
//引入 下拉菜单 全部-价格-分类
import DropDown from '@/components/DropDown';
import HistoryHot from '@/views/HistoryHot';
// 请求数据
import { getGoodList, GetPopupData, getSearchHelper } from '@/utils/https.js';
export default {
    data() {
        return {
            blockShow: 1,
            searchHistoryData: [], // 历史记录列表
            searchHotData: [], // 热门搜索列表
            placeholderVal: '', // 搜索框 placeholder 提示词
            // ------------------
            searchTipsArr: [],
            keyword: '',
            page: 1,
            size: 20,
            order: 'desc', //降序
            categoryId: 0, // 类别id 全部、居家、餐厨。。。
            sort: 'id', // id或 price
            goodList: [], //商品列表数组
            filterCategory: [], // 分类选项集合
        };
    },
    components: {
        DropDown,
        HistoryHot,
    },
    created() {
        // 初始化默认渲染调用
        this.getDataList();
        GetPopupData().then(res => {
            // console.log(11, res);
            this.placeholderVal = res.data.data.defaultKeyword.keyword; // 搜索框 placeholder 提示词
            this.searchHistoryData = res.data.data.historyKeywordList; // 历史记录列表
            this.searchHotData = res.data.data.hotKeywordList; // 热门搜索列表
        });
    },
    methods: {
        setValue(m) {
            // 点击历史记录和热门搜索触发 触发setValue
            // 点击搜索列表提示触发 也触发setValue
            console.log(m); // m 为传过来的参数
            this.value = m;
            this.onSearch();
        },
        onSearch() {
            console.log(this.keyword);
            // 搜索调用getDataList
            this.getDataList();
        },
        // -----------------------------
        onInput(val) {
            this.blockShow = 2; // 展示搜索提示列表组件
            // 输入触发
            // 搜索提示数据请求
            getSearchHelper({ keyword: val }).then(res => {
                console.log(33, res);
                this.searchTipsArr = res.data;
            });
        },
        onCancel() {
            this.$router.push('/home');
        },
        getDataList() {
            //获取商品数据列表 封装函数
            let paramsObj = {
                keyword: this.keyword,
                page: this.page,
                size: this.size,
                order: this.order, //降序
                categoryId: this.categoryId, // 类别id 全部、居家、餐厨。。。
                sort: this.sort, // id或 price
            };
            getGoodList(paramsObj).then(res => {
                this.goodList = res.data.data.goodsList; // 商品列表
                // console.log(this.goodList);
                this.filterCategory = res.data.data.filterCategory; // 分类选项集合
                this.filterCategory = JSON.stringify(this.filterCategory).replace(/name/g, 'text').replace(/id/g, 'value');
                this.filterCategory = JSON.parse(this.filterCategory);
            });
        },
        changePrice(m) {
            // 点击价格排序执行的函数
            this.order = m; // 升降序  desc  asc
            // console.log(this.order);
            this.sort = 'price'; // 根据价格排序
            this.getDataList();
        },
        changeCategory(n) {
            //点击分类进行查询
            // console.log(n);
            this.sort = 'id';
            this.categoryId = n;
            this.getDataList();
        },
    },
};
</script>
<style scoped>
/* @import url(); 引入css类 */
</style>
